<template>
  <view class="definite">
    <u-navbar :is-back="true" :custom-back="BackM" title="设置商户分润" back-text="" > </u-navbar>
    <!-- <view class="title">- 商户信息 -</view>
    <view class="item">
      <span>联系人：</span>

      <u-input v-model="form.coordinate"
          placeholder="请输入商户联系人"
        />
    </view>
    <view class="item">
      <span>联系电话：</span>

      <u-input v-model="form.phone"
          placeholder="请输入商户联系人"
        />
    </view>

    <view class="em">
      注：若设置分润，该手机号将作为分润账户，可通过手机号登陆进行分润提现
    </view> -->
    <view class="title">- 是否给商户分润 -</view>
    <view class="item">
      <span style="float: left">设置{{this.profitPattern==0?'绝对分润':'相对分润'}}比例</span>
      <span style="font-size: 0.6rem; float: left">(非必填)</span>
      <image @click="changeM" class="item-image" src="../../../style/image/my/A32.jpg" alt="" />
    </view>
    <view class="item">
      <span style="float: left">{{this.profitPattern==0?'绝对分润':'相对分润'}}比例：</span>
      <input v-model="profitRatio" class="me" type="number" placeholder="设置1到100" maxlength="3"/>
      <span class="en">%</span>
    </view>
	
	<view class="item">
	  <span style="float: left">虚拟分润比例：</span>
	  <input v-model="virtualProfitRatio" class="me" type="number" @input="virtualInput" placeholder="设置1到100" maxlength="3"/>
	  <span class="en">%</span>
	</view>
	
    <view class="em">
      注：您当前持有的分润比例，将作为100%的值，你可分给商户从1% 到100%的值。
    </view>
    <view class="item" style="justify-content: space-between">
      <view style="display: flex; align-items: center">
        <view>商户查看订单权限</view>
        <view class="it">商户收益订单明细，将展示给商户端查看</view>
      </view>
      <u-switch
        v-model="checkedOne"
        active-color="#02af74"
        inactive-color="#cccccc"
      ></u-switch>
    </view>
    <view class="item" style="justify-content: space-between">
      <view style="display: flex; align-items: center">
        <view>商户查看分润比例权限</view>
        <view class="it">商户分润比例，将展示给商户端查看</view>
      </view>
      <u-switch
        v-model="checkedTwo"
        active-color="#02af74"
        inactive-color="#cccccc"
      ></u-switch>
    </view>
	
    <!-- <view class="title">- 手续费 -</view>
    <view class="item">
      <span style="float: left">手续费：</span>
      <input v-model="drawRatio" class="me" type="text" placeholder="请设置手续费" />
      <span class="en">%</span>
    </view>
    <view class="em">
      注：您填写增加部分的提现手续费，将在商户提现时以分润的方式发放到您的账户
    </view> -->
    <view class="footP">
      <view @click="nextM" style="padding: 0.7rem; display: flex; align-items: center" >
        <view style="color: white; margin-left: 0.2rem">下一步</view>
      </view>
    </view>
	
	
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import {AppModule} from '../../../store/modules/app'

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public checkedOne = true;
  public checkedTwo = false;

  public form = {
    name: "",
    phone: "",
    address: "",
    coordinate: "",
    trade: "",
    time: "",
  };

  public profitRatio = ''  //分润比例
  public virtualProfitRatio = '' //虚拟分润比例
  public profitPattern=0    // 分润模式（0 绝对 ，1 相对）
  public shopProfitRatio=''
  public drawRatio=''

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  } 

  changeM(){

        if(this.profitPattern==0){
           this.profitPattern=1
        }else{
              this.profitPattern=0
        }
    console.log(this.profitPattern,'  this.profitPattern=1  this.profitPattern=1  ')
  }

  BackM() {
    uni.navigateBack({
      //返回
      delta: 1,
    });
  }
  nextM(){
	  if(this.profitRatio == '' || this.profitRatio.indexOf(".") != -1 || parseInt(this.profitRatio) > 100 || parseInt(this.profitRatio) < 1){//有小数点
		  uni.showToast({
		   title: '分润比例为1到100的整数',
		   icon:'none',
		   duration: 1000
		  });
		  return
	  }
	  if(this.virtualProfitRatio == '' || this.virtualProfitRatio.indexOf(".") != -1 || parseInt(this.virtualProfitRatio) > 100 || parseInt(this.virtualProfitRatio) < 1){//有小数点
		  uni.showToast({
		   title: '虚拟分润比例为1到100的整数',
		   icon:'none',
		   duration: 1000
		  });
		  return
	  }
	  
  let data:any={
      profitPattern:this.profitPattern,   // 分润模式（0 绝对 ，1 相对）
      profitRatio:this.profitRatio == '' ? 0.00 : parseInt(this.profitRatio)/100,  //	分润比例
	  virtualProfitRatio:this.virtualProfitRatio == '' ? 0.00 : parseInt(this.virtualProfitRatio)/100,  //	虚拟分润比例
      // drawRatio:this.drawRatio,		//提现手续费
      showOrder:'',	//查看订单权限（0 无权限 ，1 允许）
      shopProfitRatio:''		//查看分润比例权限（0 无权限 ，1 允许）
   }
   if(this.checkedOne==true){
       data.showOrder=1
   }else{
       data.showOrder=0
   }

    if(this.checkedTwo==true){
       data.shopProfitRatio=1
   }else{
       data.shopProfitRatio=0
   }
   AppModule.profitInfoAction(data)
   uni.navigateTo({
      url: "../../myPos/calculate",
    });
  }
  
  //虚拟分润的输入
  virtualInput(event:any){
	  var value = event.target.value;
	  //去除0和小数点
  }
}
</script>

<style  lang="scss"  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.sure {
  height: 2.5rem;
  line-height: 2.5rem;
  color: #ffffff;
  background: #02af74;
  border-radius: 0;
  cursor: pointer;
  margin-top: 1.5rem;
}
.title {
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 1rem;
}
.item {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 0.98rem;
  background: #ffffff;
  padding: 0.6rem 0.5rem;
  margin-bottom: 0.08rem;
  position: relative;
}
.em {
  padding: 0.6rem 0.5rem;
  font-size: 0.62rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  background: #ffffff;
  line-height: 0.76rem;
  margin-bottom: 0.06rem;
}
.me {
  font-size: 0.7rem;
  color: #999999;
  width: 12rem;
}
.item-image {
  width: 4.15rem;
  height: 1.17rem;
  padding-left: 0.5rem;
  cursor: pointer;
}
.en {
  position: absolute;
  right: 1rem;
  top: 0.7rem;
  font-size: 1.01rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.it {
  font-size: 0.55rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 0.76rem;
}
.em_image {
  position: absolute;
  top: 0.8rem;
  right: 0.5rem;
  width: 3rem;
  height: 1.5rem;
}
uni-button:after {
  border-radius: 0;
}

.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>